<template>
  <div class="com-content">
    <!-- 面包屑 -->
    <Header :headerData="headerData" />

    <!-- 页面内容 -->
    <div class="com-sub-content">
      <div
        class="main-content sbxxcxxq-container"
        style="height: auto; min-height: 100%; padding: 15px"
      >
        <div class="flex-row-between">
          <div class="flex-row-start">
            <span>主附表表单：</span>
            <el-select v-model="value" style="width: 200px">
              <el-option
                v-for="item in selectData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="flex-row-center daochu" @click="downloadPDF">导出</div>
        </div>

        <!-- 页面展示的格式 -->
        <div class="sbxxcxxq-container__pdf">
          <table
            id="report1"
            cellspacing="0"
            cellpadding="0"
            style="width: 1045px; margin: auto; table-layout: fixed; border-collapse: collapse"
          >
            <colgroup>
              <col style="width: 95px" />
              <col style="width: 95px" />
              <col style="width: 95px" />
              <col style="width: 95px" />
              <col style="width: 95px" />
              <col style="width: 95px" />
              <col style="width: 95px" />
              <col style="width: 95px" />
              <col style="width: 95px" />
              <col style="width: 95px" />
              <col style="width: 95px" />
            </colgroup>
            <tbody>
              <tr rn="1" style="height: 30px">
                <td colspan="11" class="report1_4">财产和行为税纳税申报表</td>
                <td class="report1_10" style="display: none" />
              </tr>
              <tr rn="2" style="height: 25px">
                <td colspan="11" class="report1_7">
                  纳税人识别号（统一社会信用代码）：{{ pageInfo.tl_number }}
                </td>
                <td class="report1_8" style="display: none" />
              </tr>
              <tr rn="3" style="height: 25px">
                <td colspan="4" class="report1_3">纳税人名称：{{ pageInfo.tl_name }}</td>
                <td class="report1_3" />
                <td class="report1_3" />
                <td colspan="5" class="report1_18" style="padding-right: 3px">
                  金额单位：人民币元（列至角分）
                </td>
                <td class="report1_17" style="display: none; padding-right: 3px" />
              </tr>
              <tr rn="4" style="height: 25px">
                <td
                  rowspan="2"
                  colspan="5"
                  class="report1_2"
                  style="padding-right: 3px; padding-left: 3px"
                >
                  本期是否适用小微企业“六税两费”减征政策
                </td>
                <td rowspan="2" class="report1_2" style="padding-right: 3px; padding-left: 3px">
                  □&ensp;是&ensp;■&ensp;否
                </td>
                <td colspan="2" class="report1_2" style="padding-right: 3px; padding-left: 3px">
                  减征政策适用主体
                </td>
                <td colspan="3" class="report1_9" />
                <td class="report1_5" style="display: none; padding-left: 3px" />
              </tr>
              <tr rn="5" style="height: 25px">
                <td colspan="2" class="report1_2" style="padding-right: 3px; padding-left: 3px">
                  适用减征政策起止时间
                </td>
                <td colspan="3" class="report1_2">
                  &ensp;&ensp;&ensp;&ensp;年&ensp;&ensp;&ensp;&ensp;&ensp;月&ensp;&ensp;&ensp;&ensp;&ensp;日&ensp;至&ensp;&ensp;&ensp;&ensp;&ensp;年&ensp;&ensp;&ensp;&ensp;&ensp;月&ensp;&ensp;&ensp;&ensp;日
                </td>
                <td class="report1_5" style="display: none; padding-left: 3px" />
              </tr>
              <tr rn="6" style="height: 25px">
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">序号</td>
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">税种</td>
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">税目</td>
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                  税款所属期起
                </td>
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                  税款所属期止
                </td>
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">计税依据</td>
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">税率</td>
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">应纳税额</td>
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">减免税额</td>
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">已缴税额</td>
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                  应补（退）税额
                </td>
                <td
                  class="report1_11"
                  style="display: none; padding-right: 3px; padding-left: 3px"
                />
              </tr>
              <tr v-for="(item, index) in pageInfo.child" :key="index" rn="7" style="height: 25px">
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                  {{ index + 1 }}
                </td>
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                  {{ item.id ? item.name : "合计" }}
                </td>
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                  {{ item.id ? item.categories_taxation : "-" }}
                </td>
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                  {{ item.id ? item.start_date : "-" }}
                </td>
                <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                  {{ item.id ? item.end_date : "-" }}
                </td>
                <td class="report1_1" style="padding-right: 3px">
                  {{ item.id ? item.tax_basis : "-" }}
                </td>
                <td class="report1_1" style="padding-right: 3px">
                  {{ item.id ? item.tax_rate : "-" }}
                </td>
                <td class="report1_1" style="padding-right: 3px">{{ item.tax_payable }}</td>
                <td class="report1_1" style="padding-right: 3px">{{ item.tax_savings }}</td>
                <td class="report1_1" style="padding-right: 3px">{{ item.tax_amount }}</td>
                <td class="report1_1" style="padding-right: 3px">{{ item.refunded_tax_amount }}</td>
                <td class="report1_14" style="display: none; padding-right: 3px" />
              </tr>
              <tr rn="12" style="height: 25px">
                <td colspan="5" class="report1_12" style="padding-left: 3px">
                  经办人：&ensp;{{ pageInfo.hb_name }}
                </td>
                <td colspan="6" class="report1_15" style="padding-left: 3px">
                  受理人：{{ pageInfo.ab_name }}
                </td>
                <td class="report1_5" style="display: none; padding-left: 3px" />
              </tr>
              <tr rn="13" style="height: 25px">
                <td colspan="5" class="report1_13" style="padding-left: 3px">
                  经办人身份证号：&ensp;{{ pageInfo.hb_id_card }}
                </td>
                <td rowspan="2" colspan="6" class="report1_16" style="padding-left: 3px">
                  受理税务机关（章）：{{ pageInfo.ab_organ }}
                </td>
                <td class="report1_5" style="display: none; padding-left: 3px" />
              </tr>
              <tr rn="14" style="height: 25px">
                <td colspan="5" class="report1_13" style="padding-left: 3px">
                  代理机构签章：&ensp;
                </td>
                <td class="report1_5" style="display: none; padding-left: 3px" />
              </tr>
              <tr rn="15" style="height: 25px">
                <td colspan="5" class="report1_6" style="padding-left: 3px">
                  代理机构统一社会信用代码：&ensp;
                </td>
                <td colspan="6" class="report1_6" style="padding-left: 3px">
                  受理日期：&ensp;{{ formatDate(pageInfo.ab_date) }}
                </td>
                <td class="report1_5" style="display: none; padding-left: 3px" />
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 打印的格式 -->
        <div style="height: 0; overflow: hidden">
          <div id="printData" class="sbxxcxxq-container__pdf">
            <table
              id="report1"
              cellspacing="0"
              cellpadding="0"
              style="width: 1045px; margin: auto; table-layout: fixed; border-collapse: collapse"
            >
              <colgroup>
                <col style="width: 95px" />
                <col style="width: 95px" />
                <col style="width: 95px" />
                <col style="width: 95px" />
                <col style="width: 95px" />
                <col style="width: 95px" />
                <col style="width: 95px" />
                <col style="width: 95px" />
                <col style="width: 95px" />
                <col style="width: 95px" />
                <col style="width: 95px" />
              </colgroup>
              <tbody>
                <tr rn="1" style="height: 30px">
                  <td colspan="11" class="report1_4">财产和行为税纳税申报表</td>
                  <td class="report1_10" style="display: none" />
                </tr>
                <tr rn="2" style="height: 25px">
                  <td colspan="11" class="report1_7">
                    纳税人识别号（统一社会信用代码）：{{ pageInfo.tl_number }}
                  </td>
                  <td class="report1_8" style="display: none" />
                </tr>
                <tr rn="3" style="height: 25px">
                  <td colspan="4" class="report1_3">纳税人名称：{{ pageInfo.tl_name }}</td>
                  <td class="report1_3" />
                  <td class="report1_3" />
                  <td colspan="5" class="report1_18" style="padding-right: 3px">
                    金额单位：人民币元（列至角分）
                  </td>
                  <td class="report1_17" style="display: none; padding-right: 3px" />
                </tr>
                <tr rn="4" style="height: 25px">
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">序号</td>
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">税种</td>
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">税目</td>
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                    税款所属期起
                  </td>
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                    税款所属期止
                  </td>
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">计税依据</td>
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">税率</td>
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">应纳税额</td>
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">减免税额</td>
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">已缴税额</td>
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                    应补（退）税额
                  </td>
                  <td
                    class="report1_11"
                    style="display: none; padding-right: 3px; padding-left: 3px"
                  />
                </tr>
                <tr
                  v-for="(item, index) in pageInfo.child"
                  :key="index"
                  rn="7"
                  style="height: 25px"
                >
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                    {{ index + 1 }}
                  </td>
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                    {{ item.id ? item.name : "合计" }}
                  </td>
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                    {{ item.id ? item.categories_taxation : "-" }}
                  </td>
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                    {{ item.id ? item.start_date : "-" }}
                  </td>
                  <td class="report1_2" style="padding-right: 3px; padding-left: 3px">
                    {{ item.id ? item.end_date : "-" }}
                  </td>
                  <td class="report1_1" style="padding-right: 3px">
                    {{ item.id ? item.tax_basis : "-" }}
                  </td>
                  <td class="report1_1" style="padding-right: 3px">
                    {{ item.id ? item.tax_rate : "-" }}
                  </td>
                  <td class="report1_1" style="padding-right: 3px">{{ item.tax_payable }}</td>
                  <td class="report1_1" style="padding-right: 3px">{{ item.tax_savings }}</td>
                  <td class="report1_1" style="padding-right: 3px">{{ item.tax_amount }}</td>
                  <td class="report1_1" style="padding-right: 3px">
                    {{ item.refunded_tax_amount }}
                  </td>
                  <td class="report1_14" style="display: none; padding-right: 3px" />
                </tr>
                <tr rn="8" style="height: 40px">
                  <td
                    colspan="11"
                    style="
                      padding-left: 3px;
                      border-right: 1px solid #000;
                      border-left: 1px solid #000;
                    "
                  >
                    声明：此表是根据国家税收法律法规及相关规定填写的，本人（单位）对填报内容（及附带资料）的真实性、可靠性、完整性负责。
                  </td>
                </tr>
                <tr rn="12" style="height: 25px">
                  <td colspan="5" style="border-left: 1px solid #000" />
                  <td colspan="6" style="border-right: 1px solid #000">
                    纳税人（签章）：&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;年&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;月&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;日
                  </td>
                </tr>
                <tr rn="12" style="height: 25px">
                  <td colspan="5" class="report1_12" style="padding-left: 3px">
                    经办人：&ensp;{{ pageInfo.hb_name }}
                  </td>
                  <td colspan="6" class="report1_15" style="padding-left: 3px">
                    受理人：{{ pageInfo.ab_name }}
                  </td>
                  <td class="report1_5" style="display: none; padding-left: 3px" />
                </tr>
                <tr rn="13" style="height: 25px">
                  <td colspan="5" class="report1_13" style="padding-left: 3px">
                    经办人身份证号：&ensp;{{ pageInfo.hb_id_card }}
                  </td>
                  <td rowspan="2" colspan="6" class="report1_16" style="padding-left: 3px">
                    受理税务机关（章）：{{ pageInfo.ab_organ }}
                  </td>
                  <td class="report1_5" style="display: none; padding-left: 3px" />
                </tr>
                <tr rn="14" style="height: 25px">
                  <td colspan="5" class="report1_13" style="padding-left: 3px">
                    代理机构签章：&ensp;
                  </td>
                  <td class="report1_5" style="display: none; padding-left: 3px" />
                </tr>
                <tr rn="15" style="height: 25px">
                  <td colspan="5" class="report1_6" style="padding-left: 3px">
                    代理机构统一社会信用代码：&ensp;
                  </td>
                  <td colspan="6" class="report1_6" style="padding-left: 3px">
                    受理日期：&ensp;{{ formatDate(pageInfo.ab_date) }}
                  </td>
                  <td class="report1_5" style="display: none; padding-left: 3px" />
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import Http from "@/utils/api";
import htmlToPdf from "@/utils/htmlToPdf";
import { formatIdNumber, formatDate } from "@/utils/index";

const { currentRoute } = useRouter();
const route = currentRoute.value;

const headerData = ref<any>({
  title: "申报信息查询详情",
  type: 2,
  list: [
    { title: "税务数字账户", url: "" },
    { title: "账户查询", url: "" },
    { title: "申报信息查询", url: "" },
    { title: "申报信息查询", url: "" },
  ],
});

const pageInfo = ref<any>({});
const value = ref("1");
const selectData = [{ value: "1", label: "财产和行为税纳税申报表" }];

// 获取活动信息
function getInfo() {
  Http.Get("api4", {
    id: route.query.id,
    table: route.query.table,
  }).then((res: any) => {
    if (res.code == 1) {
      pageInfo.value = res.data;
    } else {
      ElMessage({
        message: res.message,
        type: "error",
        plain: true,
      });
    }
  });
}

// 导出pdf
function downloadPDF() {
  htmlToPdf.getPdf({
    title: "财产和行为税纳税申报表",
    ids: ["#printData"],
    direction: "landscape",
  });
}

// 生命周期
onMounted(() => {
  getInfo();
});
</script>

<style lang="scss" scoped>
@use "./css/style";
@use "./css/table";
@use "./css/table3";
</style>
